<template>
  <el-dialog v-if="load" title="历史移动加权平均价" v-model="visible" append-to-body :close-on-click-modal="false" class="full"
    width="1000px" @close="handleClose">
    <div class="pt-2 h-full">
      <VTable ref="tableRef" v-bind="tableOptions"></VTable>
    </div>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { nextTick } from 'vue';
import api from '../api'

const load = ref(false)
const visible = ref(false)
const sku = ref({})

// 查询
const tableRef = ref()
const query = () => {
  tableRef?.value.query()
}

// 列表配置
const tableOptions = reactive({
  columns: [
    { title: '采购单', field: 'purchase_no' },
    { title: '类型', field: 'type_name' },
    { title: '下单数量', field: 'purchase_num' },
    { title: '采购单产品单价', field: 'purchase_unit_price' },
    { title: '移动加权平均价', field: 'origin_move_average_price' },
    { title: '剩余库存', field: 'inventory_num' },
    { title: '更新后移动加权平均价', field: 'move_average_price', minWidth: 80 },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page }) => api.historyPrice({ sku: sku.value, ...page })
    }
  }
})

const emit = defineEmits(['close', 'success'])

// 打开弹窗
const open = async (s) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  sku.value = s
  visible.value = true
  await nextTick()
  query()
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>